<template>
    <div>
        <h1 style="text-align: center;">商品修改</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="商品图片">
                <el-upload class="upload-demo" action="/admin/api/uploads" :show-file-list="false" name="dishimg"
                    accept=".jpg,.png,.jpeg,.webp,.gif" :on-success="successUpload">
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <img v-show="form.imgpath === ''" style="width: 100px; height: 100px" src="../../assets/pic.jpg" alt="">
                <img v-show="form.imgpath !== ''" style="width: 100px; height: 100px" :src="'/admin/' + form.imgpath"
                    alt="">
            </el-form-item>
            <el-form-item label="商品规格">
                <div class="specs" v-for="(spec, index) in specs" :key="spec.id">
                    <el-input v-model="spec.value"></el-input>
                    <el-button @click="addspec" v-if="index === specs.length - 1" type="primary" icon="el-icon-circle-plus"
                        circle></el-button>
                    <el-button @click="reducespec" v-if="index === specs.length - 1 && specs.length > 2" type="danger"
                        icon="el-icon-remove" circle></el-button>
                </div>
            </el-form-item>
            <el-form-item label="商品类别">
                <div class="specs" v-for="(kind, index) in kinds" :key="kind.id">
                    <el-input v-model="kind.value"></el-input>
                    <el-button @click="addkind" v-if="index === kinds.length - 1" type="primary" icon="el-icon-circle-plus"
                        circle></el-button>
                    <el-button @click="reducekind" v-if="index === kinds.length - 1 && kinds.length > 2" type="danger"
                        icon="el-icon-remove" circle></el-button>
                </div>
            </el-form-item>
            <el-form-item label="是否上架">
                <el-switch v-model="form.enable" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
            <el-form-item label="商品分类">
                <el-select v-model="form.catname" placeholder="请选择商品分类">
                    <el-option v-for="item in cats" :key="item._id" :label="item.catname" :value="item.catname">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品详情">
                <template>
                    <div style="border: 1px solid #ccc;">
                        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig"
                            :mode="mode" />
                        <Editor style="height: 300px; overflow-y: hidden;" v-model="form.detail"
                            :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated" />
                    </div>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button @click="onSubmit" type="primary">修改</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { catList, dishList } from '@/request'

import Vue from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { dishEdit } from '@/request'

export default {
    components: { Editor, Toolbar },
    data() {
        return {
            form: {
                name: '',
                price: '',
                imgpath: '',
                enable: false,
                detail: '',
                catname: '',
                specifications: '',
                kind: ''
            },
            specs: [
                {
                    id: 1,
                    value: ''
                },
                {
                    id: 2,
                    value: ''
                }
            ],
            kinds: [
                {
                    id: 1,
                    value: ''
                },
                {
                    id: 2,
                    value: ''
                }
            ],
            cats: [],
            editor: null,
            // html: '<p>hello</p>',
            toolbarConfig: {},
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        async getDishOne(id) {
            // console.log(id);
            let data = await dishList()
            if (data.error_code === 200) {
                let dishlist = data.data.dishlist
                // console.log(dishlist);
                this.form = dishlist.find(item => item._id === id)
                console.log(this.form);
                let specscopy = this.form.specifications.split('=====')
                let kindscopy = this.form.kind.split('=====')
                let specArr = []
                let kindArr = []
                specscopy.forEach((item, index) => {
                    let obj = {
                        id: index + 1,
                        value: item
                    }
                    specArr.push(obj)
                })
                kindscopy.forEach((item, index) => {
                    let obj = {
                        id: index + 1,
                        value: item
                    }
                    kindArr.push(obj)
                })
                this.kinds = kindArr
                this.specs = specArr
            }
        },
        async getCatList() {
            let data = await catList()
            if (data.error_code === 200) {
                this.cats = data.data.catlist
            }
        },
        successUpload(response, file, fileList) {
            // console.log(response, file, fileList);
            this.form.imgpath = response.data.filepath
        },
        addspec() {
            this.specs.push({
                id: this.specs.length + 1,
                value: ''
            })
        },
        reducespec() {
            this.specs.pop()
        },
        addkind() {
            this.kinds.push({
                id: this.kinds.length + 1,
                value: ''
            })
        },
        reducekind() {
            this.kinds.pop()
        },
        async onSubmit() {
            let specifications = ''
            this.specs.forEach(item => {
                specifications += '=====' + item.value
            })
            this.form.specifications = specifications.slice(5)
            let kind = ''
            this.kinds.forEach(item => {
                kind += '=====' + item.value
            })
            this.form.kind = kind.slice(5)
            let data = await dishEdit(this.form)
            let { error_code, msg } = data
            if (error_code === 200) {
                this.$message({
                    type: 'success',
                    message: msg,
                    onClose: () => {
                        this.$router.push('/dish/list')
                    }
                });
            } else {
                this.$message({
                    type: 'error',
                    message: msg
                });
            }
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    created() {
        this.getCatList()
        let id = this.$route.query.id
        this.getDishOne(id)
    },
    // mounted() {
    //     // 模拟 ajax 请求，异步渲染编辑器
    //     setTimeout(() => {
    //         this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    //     }, 1500)
    // },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
.specs {
    display: flex;

    .el-button.is-circle {
        padding: 0;
    }

    .el-button {
        font-size: 35px;
        padding: 0;
        width: 37px;
        height: 37px;
        margin-left: 10px;
    }

    .el-input {
        width: 80%;
    }
}

.quill-editor {
    width: 800px;
    height: 400px;
    background-color: #fff;
}
</style>